<template>
  <div class="city-container">
    <div class="currentCity">
    <p>当前定位城市</p>
    <div>
      <mt-button type="danger">武汉</mt-button>
      <span>定位服务未开启</span>
    </div>
    </div>
    <div class="hasOpenCity">
      <p>已开通城市</p>
      <div class="cityBtn">
        <mt-button type="default">武汉</mt-button>
        <mt-button type="default">郑州</mt-button>
        <mt-button type="default">长沙</mt-button>
      </div>
      <div class="cityBtn btnColor">
        <mt-button type="default">北京</mt-button>
        <mt-button type="default">上海</mt-button>
        <mt-button type="default">深圳</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>

<style scoped lang="less">
.city-container {
  padding: 0 32/37.5rem;
  padding-top: 49/37.5rem;
  text-align: left;
  .mint-button--normal {
    padding: 0 32px;
    height: 37px;
  }
  /deep/ .mint-button-text {
    font-size: 28/37.5rem;
  }
  .currentCity {
    p {
      color: #333;
      font-size: 30/37.5rem;
    }
    div {
      margin-top: 31/37.5rem;
      span {
        font-size: 26/37.5rem;
        color: #555;
        margin-left: 32/37.5rem;
      }
    }
  }
  .hasOpenCity {
    margin-top: 30/37.5rem;
    p {
      font-size: 30/37.5rem;
      color: #333;
    }
    .cityBtn {
      display: flex;
      justify-content: space-between;
      margin-top: 31/37.5rem;
      .mint-button {
        // flex: 1;
        // width: 33.3%;
      }
    }
    .btnColor {
      .mint-button {
        background-color: #eeeeee;
      }
    }
  }
}
</style>
